{extend name="base" /}
{block name="content"}
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li><a href="{:url('admin/dp/article', ['category' => $category])}">文章管理</a></li>
                <li class="layui-this">添加文章</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <form class="layui-form" action="{:url('admin/dp/save_article')}" method="post">

                        <!-- 分类选择 -->
                        <div class="layui-form-item">
                            <label class="layui-form-label">文章分类</label>
                            <div class="layui-input-block">
                                <input type="radio" name="category" value="0" title="工作动态" {if $category==0}checked{/if}>
                                <input type="radio" name="category" value="1" title="政策列表" {if $category==1}checked{/if}>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">文章类型</label>
                            <div class="layui-input-block">
                                <input type="radio" name="type" value="link" title="微信文章链接" checked>
                                <input type="radio" name="type" value="content" title="普通文章内容">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">文章标题</label>
                            <div class="layui-input-block">
                                <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">文章简介</label>
                            <div class="layui-input-block">
                                <textarea name="desc" placeholder="请输入文章简介，建议100字以内" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <!-- 微信链接 -->
                        <div class="layui-form-item link-group">
                            <label class="layui-form-label">微信链接</label>
                            <div class="layui-input-block">
                                <input type="url" name="link_url" placeholder="请输入微信文章链接" class="layui-input">
                            </div>
                        </div>

                        <!-- 富文本内容 -->
                        <div class="layui-form-item content-group" style="display:none;">
                            <label class="layui-form-label">文章内容</label>
                            <div class="layui-input-block">
                                <div id="editor-wrapper">
                                    <div id="toolbar-container"></div>
                                    <div id="editor-container"></div>
                                </div>
                                <textarea name="content" id="content" style="display:none;"></textarea>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="submitArticle">提交</button>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<link href="/public/assets/css/style.css" rel="stylesheet" />
<script src="/public/assets/js/index.js"></script>

<style>
  #editor-wrapper {
    border: 1px solid #ccc;
    z-index: 100;
  }
  #toolbar-container {
    border-bottom: 1px solid #ccc;
  }
  #editor-container {
    height: 400px;
  }
</style>

<script>
layui.use(['form'], function(){
    var form = layui.form;

    // WangEditor 初始化
    const { createEditor, createToolbar } = window.wangEditor;
    const editorConfig = {
        placeholder: '请输入文章内容...',
        onChange(editor) {
            const html = editor.getHtml();
            document.getElementById('content').value = html;
        },
        MENU_CONF: {
            uploadImage: {
                server: '/index/index/upload',
                fieldName: 'file',
                customInsert(res, insertFn) {
                    if (res.code === 1) {
                        insertFn('/public/'+res.data.url);
                    } else {
                        layer.msg('图片上传失败');
                    }
                }
            }
        }
    };

    const editor = createEditor({
        selector: '#editor-container',
        html: '',
        config: editorConfig,
        mode: 'default',
    });

    createToolbar({
        editor,
        selector: '#toolbar-container',
        mode: 'default',
    });

    // 类型切换
    form.on('radio', function(data){
        if(data.elem.name === 'type'){
            if(data.value === 'link'){
                $('.link-group').show();
                $('.content-group').hide();
            } else {
                $('.link-group').hide();
                $('.content-group').show();
            }
        }
    });

    // 表单提交
    form.on('submit(submitArticle)', function(data){
        var type = $('input[name=type]:checked').val();
        var title = $('input[name=title]').val();

        if (!title) {
            layer.msg('标题不能为空');
            return false;
        }

        if (type === 'link') {
            var link = $('input[name=link_url]').val();
            if (!link) {
                layer.msg('微信链接不能为空');
                return false;
            }
        } else {
            var content = editor.getHtml();
            if (!content || content === '<p><br></p>') {
                layer.msg('文章内容不能为空');
                return false;
            }
            $('#content').val(content);  // 同步内容
        }

        $.post(data.form.action, $(data.form).serialize(), function(info){
            if(info.code === 1){
                layer.msg(info.msg);
                setTimeout(function(){
                    location.href = "{:url('admin/dp/article', ['category' => $category])}";
                }, 1000);
            } else {
                layer.msg(info.msg);
            }
        });

        return false;
    });
});
</script>
{/block}
